<template>
	<view class="container">
		<view class="mybg">
			<image src="/static/images/mybg.png"></image>
		</view>
		<view class="user_info">
			<view class="user_img" @click="chooseAvatar">
				<image :src="avatar"></image>
			</view>
			<view class="user_txt">
				<view class="user_name">{{user.mobile}}</view>
				<view class="user_tel">{{user.desc}}</view>
			</view>
			<view class="user_szbtn">
				<navigator hover-class="none" url="/pages/user/iinfo/iinfo">
					<image src="/static/images/ico_sz.png"></image>
				</navigator>
			</view>
		</view>
		<!-- <view class="mynum">
			<view class="mynum_li">
				<navigator hover-class="none" url="/pages/user/myjf/myjf"><text>{{user.jifen}}</text>我的积分</navigator>
			</view>
			<view class="mynum_li">
				<navigator hover-class="none" url="/pages/user/mycoupon/mycoupon"><text>{{usercenter.coupon}}</text>优惠券
				</navigator>
			</view>
			<view class="mynum_li">
				<navigator hover-class="none" url="/pages/user/collect/collect"><text>{{usercenter.bookmark}}</text>我的收藏
				</navigator>
			</view>
		</view> -->
		<!-- <view class="mylink">
			<view class="mylink_dl" @tap="yqbtn()">
				<view class="mylink_dt">
					<view class="mylink_title">邀请有礼</view>
					<view class="mylink_txt">邀好友得积分</view>
				</view>
				<view class="mylink_dd">
					<image src="/static/images/ico_jfmall.png"></image>
				</view>
			</view>
			<view class="mylink_dl" @tap="mallbtn()">
				<view class="mylink_dt">
					<view class="mylink_title">积分商城</view>
					<view class="mylink_txt">积分可兑换好礼</view>
				</view>
				<view class="mylink_dd">
					<image src="/static/images/ico_invite.png"></image>
				</view>
			</view>
		</view> -->
		<!-- <view class="myorder">
			<view class="myorder_hd">
				<view class="myorder_title">我的订单</view>
				<view class="myorder_more">
					<navigator hover-class="none" url="/pages/user/myorder/myorder?status=-1">全部订单<text></text>
					</navigator>
				</view>
			</view>
			<view class="myorder_bd">
				<view class="myorder_li">
					<navigator hover-class="none" url="/pages/user/myorder/myorder?status=0">
						<image src="/static/images/order_ico1.png"></image><text>待付款</text>
					</navigator>
				</view>
				<view class="myorder_li">
					<navigator hover-class="none" url="/pages/user/myorder/myorder?status=1">
						<image src="/static/images/order_ico2.png"></image><text>待服务</text>
					</navigator>
				</view>
				<view class="myorder_li">
					<navigator hover-class="none" url="/pages/user/myorder/myorder?status=2">
						<image src="/static/images/order_ico3.png"></image><text>已完成</text>
					</navigator>
				</view>
				<view class="myorder_li">
					<navigator hover-class="none" url="/pages/user/myorder/myorder?status=3">
						<image src="/static/images/order_ico4.png"></image><text>退货/售后</text>
					</navigator>
				</view>
			</view>
		</view> -->
		<view class="mymenu">
			<!-- <navigator hover-class="none" url="/pages/user/mycoupon/mycoupon">
				<view class="mymenu_li">
					<view class="mymenu_liimg">
						<view class="iconfont icon-youhuiquan1"></view>
					</view>
					<view class="mymenu_litxt">我的优惠券</view>
					<view class="mymenu_liico"></view>
				</view>
			</navigator> -->
			<navigator hover-class="none" url="/pages/user/myyuyue/myyuyue">
				<view class="mymenu_li">
					<view class="mymenu_liimg">
						<view class="iconfont icon-yuyuejilu1"></view>
					</view>
					<view class="mymenu_litxt">我的预约</view>
					<view class="mymenu_liico"></view>
				</view>
			</navigator>
			<navigator hover-class="none" url="/pages/user/jzradmin/jzradmin">
				<view class="mymenu_li">
					<view class="mymenu_liimg">
						<view class="iconfont icon-icon_jiuzhenren"></view>
					</view>
					<view class="mymenu_litxt">预约人管理</view>
					<view class="mymenu_liico"></view>
				</view>
			</navigator>
			<!-- <navigator hover-class="none" url="/pages/user/about/about">
			<view class="mymenu_li">
				<view class="mymenu_liimg"><view class="iconfont icon-guanyuwomen"></view></view>
				<view class="mymenu_litxt">关于我们</view>
				<view class="mymenu_liico"></view>
			</view>
			</navigator> -->
			<navigator hover-class="none" url="/pages/user/help/help">
				<view class="mymenu_li">
					<view class="mymenu_liimg">
						<view class="iconfont icon-changjianwenti1"></view>
					</view>
					<view class="mymenu_litxt">常见问题</view>
					<view class="mymenu_liico"></view>
				</view>
			</navigator>
			<!-- <navigator hover-class="none" url="/pages/user/gonggao/gonggao">
				<view class="mymenu_li">
					<view class="mymenu_liimg">
						<view class="iconfont icon-gonggao1"></view>
					</view>
					<view class="mymenu_litxt">公告</view>
					<view class="mymenu_liico"></view>
				</view>
			</navigator> -->
			<!-- <view class="mymenu_li">
				<view class="mymenu_liimg"><view class="iconfont icon-084tuichu"></view></view>
				<view class="mymenu_litxt" @tap="logout">退出登录</view>
				<view class="mymenu_liico"></view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import API from "@/common/api.js";
	export default {
		data() {
			return {
				title: '',
				desc: '',
				user: [],
				usercenter: [],
				avatar: ""
			}
		},
		onLoad(e) {
			var phone = uni.getSystemInfoSync()

			var $this = this
			API.post("user/getUser").then((res) => {
				if (res.code == 0 || res.data.islogin == 1) {
					$this.user = res.data
					$this.avatar = res.data.avatar ? res.data.avatar : '/static/images/userimg.jpg'
				} else {
					API.showModal("请先登录", "/pages/user/login/login")
				}
			})
			API.post("user/userCenter").then((res) => {
				if (res.code == 1) {
					$this.usercenter = res.data
				}
			})


		},
		methods: {
			chooseAvatar() {

			},
			logout() {
				uni.showModal({
					title: '',
					content: '确定退出吗？',
					success: function(res) {
						if (res.confirm) {
							uni.removeStorageSync('username');
							uni.reLaunch({
								url: '/pages/user/user'
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			loginbtn() {
				var username = uni.getStorageSync('username');
				if (!username) {
					uni.navigateTo({
						url: '/pages/user/login/login'
					})
				}
			},
			yqbtn() {
				uni.navigateTo({
					url: '/pages/user/invite/invite'
				})
			},
			mallbtn() {
				uni.navigateTo({
					url: '/pages/user/jfmall/jfmall'
				})
			},

		}
	}
</script>

<style lang="scss">
	page {
		background: #f7f7f7;
	}

	.container {
		position: relative;
		z-index: 1;
	}

	.mybg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: -1;
	}

	.mybg image {
		width: 100%;
		height: 588rpx;
	}

	.user_info {
		width: 100%;
		overflow: hidden;
		display: flex;
		position: relative;
		z-index: 2;
		padding: 170rpx 60rpx 60rpx;
		box-sizing: border-box;
	}

	.user_img {
		float: left;
		background: rgba(255, 255, 255, 0.2);
		padding: 6rpx;
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		margin-right: 40rpx;
	}

	.user_img image {
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
	}

	.user_txt {
		flex: 1;
		padding-top: 32rpx;
		color: #333;
	}

	.user_name {
		font-size: 40rpx;
		font-weight: bold;
		line-height: 40rpx
	}

	.user_tel {
		margin-top: 24rpx;
		font-size: 32rpx;
	}

	.loginbtn {
		width: 100rpx !important;
		height: 40rpx !important;
		line-height: 40rpx !important;
		padding: 0;
		background: none;
		border: 0 none !important;
		font-size: 40rpx;
		font-weight: bold;
		color: #333;
		float: left;
	}

	.loginbtn::after {
		border: 0;
	}

	.mymenu {
		padding: 20rpx 40rpx;
		background: #fff;
		border-radius: 20rpx;
		margin: 28rpx 30rpx;
		overflow: hidden;
		position: relative;
		z-index: 2;
		box-sizing: border-box;
	}

	.mymenu_li {
		width: 100%;
		overflow: hidden;
		padding: 28rpx 0;
		line-height: 48rpx;
		position: relative;
	}

	.mymenu_liimg {
		width: 48rpx;
		margin: 0 32rpx 0 0;
		float: left;
	}

	.mymenu_liimg image {
		width: 48rpx;
		height: 48rpx;
		float: left;
	}

	.mymenu_liimg .iconfont {
		font-size: 44rpx;
		color: $color;
		font-weight: 500;
	}

	.mymenu_litxt {
		float: left;
		font-size: 32rpx;
	}

	.mymenu_liico {
		float: right;
		margin-top: 12rpx;
		position: relative;
		width: 0;
		height: 0;
		border: 12rpx solid;
		border-color: transparent transparent transparent #9297aa;
	}

	.mymenu_liico::after {
		content: '';
		position: absolute;
		top: -12rpx;
		left: -16rpx;
		border: 12rpx solid;
		border-color: transparent transparent transparent #fff;
	}

	.myorder {
		margin: 0 30rpx;
		padding: 30rpx;
		background: #fff;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.myorder_hd {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.myorder_title {
		font-size: 36rpx;
		font-weight: bold;
	}

	.myorder_more {
		color: #888;
		display: flex;
		align-items: center;
	}

	.myorder_more text {
		display: inline-block;
		margin: 0 0 0 10rpx;
		position: relative;
		width: 0;
		height: 0;
		border: 10rpx solid;
		border-color: transparent transparent transparent #9297aa;
	}

	.myorder_more text::after {
		content: '';
		position: absolute;
		top: -10rpx;
		left: -14rpx;
		border: 10rpx solid;
		border-color: transparent transparent transparent #fff;
	}

	.myorder_bd {
		width: 100%;
		display: flex;
		margin: 40rpx 0 0;
	}

	.myorder_li {
		flex: 1;
		text-align: center;
	}

	.myorder_li image {
		width: 50rpx;
		height: 50rpx;
	}

	.myorder_li text {
		overflow: hidden;
		display: block;
		font-size: 28rpx;
		padding-top: 20rpx;
	}

	.user_szbtn {
		position: absolute;
		top: 170rpx;
		right: 30rpx;
		padding: 20rpx;
	}

	.user_szbtn image {
		width: 44rpx;
		height: 44rpx;
	}

	.mynum {
		padding: 0 20rpx 40rpx;
		display: flex;
	}

	.mynum_li {
		flex: 1;
		text-align: center;
		color: #888;
		font-size: 28rpx;
	}

	.mynum_li text {
		color: #333;
		font-size: 40rpx;
		font-weight: bold;
		display: block;
		overflow: hidden;
		padding-bottom: 10rpx;
	}

	.mylink {
		width: 100%;
		overflow: hidden;
		padding: 0 30rpx 28rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.mylink navigator {
		display: inline-block;
	}

	.mylink_dl {
		width: 48%;
		display: flex;
		box-sizing: border-box;
		padding: 30rpx;
		align-items: center;
		background: #fff;
		border-radius: 20rpx;
	}

	.mylink_dt {
		flex: 1;
	}

	.mylink_dd image {
		width: 80rpx;
		height: 80rpx;
	}

	.mylink_title {
		font-size: 32rpx;
		font-weight: bold;
	}

	.mylink_txt {
		color: #666;
		margin-top: 10rpx;
	}
</style>